import './index.scss'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
/**
 * 登录页
 * **/
export default () => {
    return (
        <div className="login-wrapper">
            <div className='card'>
                <header>欢迎登陆</header>
                <Form
                    name="normal_login"
                    className="login-form"
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '用户名不能为空' },
                        { mix: 2, max: 10, message: '用户名必须为2~10位',trigger:'blur' }
                        ]}
                    >
                        <Input maxLength={10} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '密码不能为空' },
                        { mix: 6, max: 10, message: '密码必须为6~10位',trigger:'blur' }]}
                    >
                        <Input
                            maxLength={10}
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入密码"
                        />

                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" block htmlType="submit" className="login-form-button">
                            登录
                        </Button>

                    </Form.Item>
                </Form>


            </div>


        </div>
    )
}